<template>
  <div>
    <div v-if="isLogin">
      <div class="pic"></div>
      <div id="myInfo">
        <div id="myInfo-img">
          <img :src="`http://liufusong.top:8080${user.avatar}`" alt="" />
        </div>
        <div class="myInfo-content">
          <p>{{ user.nickname }}</p>
          <button @click="TcLogin">退出</button>
          <p>编辑个人资料<van-icon name="play" /></p>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="pic2"></div>
      <div id="myInfo">
        <div id="myInfo-img">
          <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="" />
        </div>
        <div class="myInfo-content">
          <p>游客</p>
          <button @click="noLogin">去登陆</button>
        </div>
      </div>
    </div>
    <MyNav></MyNav>
    <div class="footer">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="" />
    </div>
    <van-dialog
      v-model="show"
      title="提示"
      message="是否确认退出？"
      show-cancel-button
      confirmButtonText="退出"
      confirmButtonColor="#329eeb"
      @confirm="TcLoginFn"
    >
    </van-dialog>
  </div>
</template>

<script>
import { getUserInfoApi } from '@/api'
import MyNav from '@/views/Second/My/MyNav.vue'
export default {
  data () {
    return {
      token: this.$store.state.token,
      user: {},
      show: false,
      isLogin: localStorage.getItem('token').length !== 0
    }
  },
  watch: {
    isLogin () {
      return localStorage.getItem('token').length !== 0
    }
  },
  methods: {
    TcLogin () {
      this.show = true
    },
    TcLoginFn () {
      this.isLogin = false
      // console.log(111)
      localStorage.setItem('token', '')
    },
    noLogin () {
      this.$router.push('/login')
    }
  },
  components: {
    MyNav
  },
  async created () {
    const res = await getUserInfoApi(this.token)
    // console.log(res)
    this.user = res.data.body
  }
}
</script>

<style lang="less" scoped>
.pic {
  width: 100%;
  height: 375px;
  background: url("http://liufusong.top:8080/img/avatar.png") no-repeat center;
  background-size: contain;
}
.pic2 {
  width: 100%;
  height: 375px;
  background: url("http://liufusong.top:8080/img/profile/bg.png") no-repeat top;
  background-size: contain;
}
#myInfo {
  position: fixed;
  top: 160px;
  left: 28px;
  width: 319px;
  height: 208px;
  background-color: #fff;
  text-align: center;
  box-shadow: 0 0 10px 3px #ddd;
  #myInfo-img {
    position: absolute;
    top: -13%;
    left: 50%;
    img {
      width: 60px;
      transform: translate(-50%);
    }
  }
  .myInfo-content {
    margin-top: 50px;
    button {
      width: 60px;
      color: #fff;
      background-color: #21b97a;
      border: none;
      border-radius: 30px;
    }
  }
}
.footer {
  text-align: center;
  img {
    width: 345px;
    height: 85px;
  }
  #myInfo-content {
    transform: translate(0, -50%);
  }
}
</style>
